<!-- 弹出菜单 -->
<template>
	<view class="dropdown">
		<view v-if="showDropdown" class="dropdown-content" :class="{ 'slide-down': showDropdown }">
			<!-- 添加更多链接 -->
			<view class="block">
				<view><uni-icons type="plusempty" size="20" color="#fff"></uni-icons></view>
				<view>追加</view>
			</view>
			<view class="block">
				<view><uni-icons type="heart-filled" size="20" color="#fff"></uni-icons></view>
				<view>点赞</view>
			</view>
			<view class="block">
				<view><uni-icons type="redo-filled" size="20" color="#fff"></uni-icons></view>
				<view>分享</view>
			</view>
			<view class="block">
				<view><uni-icons type="download" size="20" color="#fff"></uni-icons></view>
				<view>下载</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	defineProps({
		showDropdown: {
			type: Boolean,
			default: false
		}
	})





	// 关闭下拉菜单的方法可以在这里添加，比如监听点击事件关闭菜单等
</script>

<style scoped>
	.dropdown {
		position: relative;
		display: inline-block;
		z-index: 10;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		right: 0;
		top: 40px;
		/* 调整这个值以匹配按钮高度 */
		background-color: #1d1d1d;
		width: 120px;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
		z-index: 1;
		border-radius: 15rpx;
	}

	/* 添加箭头 */
	.dropdown-content::before {
		content: '';
		position: absolute;
		top: -10px;
		/* 根据实际调整 */
		right: 15px;
		/* 根据实际调整，使箭头居中 */
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #1d1d1d transparent;
	}

	.slide-down {
		display: block;
		animation: slideDown 2s ease-in-out 1s infinite;
	}

	.block {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
			
	}
	.block view{
		margin-right: 20rpx;
	}
</style>